<template>
  <div>
    <el-form label-width="50px" label-position="left" :model="postData">
      <el-row>
        <el-col :span="6">
          <el-form-item label="姓:" prop="firstName">
            <el-input v-model="postData.firstName" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="名:" prop="firstName">
            <el-input v-model="postData.lastName" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="邮箱:" prop="email">
            <el-input v-model="postData.email" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="性别:" prop="gender">
            <el-select v-model="postData.gender">
              <el-option
                v-for="item in sexOption"
                :key="item.value"
                :value="item.value"
                :label="item.text"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="城市:" prop="city">
            <el-input v-model="postData.city" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="头像:" prop="city">
            <upload ref="upload" @handleSuccess="handleSuccess" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="个人描述:" prop="description">
            <el-input
              type="textarea"
              rows="10"
              v-model="postData.description"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="text-align: center">
      <el-button type="primary" @click="submit">修改</el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import upload from "../../../components/Upload/upload";

export default {
  name: "userInfo",
  data() {
    return {
      postData: {
        firstName: "",
        lastName: "",
        email: "",
        description: "",
        gender: 3,
        picture: "",
        city: ""
      },
      sexOption: [
        { value: "1", text: "男" },
        { value: "2", text: "女" },
        { value: "3", text: "保密" }
      ]
    };
  },
  components: {
    upload
  },
  methods: {
    async submit() {
      const {
        data: { errno, message, data }
      } = await axios.patch("/api/userInfo/userInfo", this.postData);
      if (!errno) {
        this.$message({ type: "success", message: "修改成功" });
        this.$store.commit("setUserInfo", data);
      } else {
        this.$message({ type: "error", message });
      }
    },
    handleSuccess(file) {
      this.postData.picture = file;
    }
  },
  mounted() {
    const temp = JSON.parse(JSON.stringify(this.$store.state.users.userInfo));
    for (const key in this.postData) {
      if (temp[key]) {
        this.postData[key] = temp[key];
      }
    }
    if (this.postData.picture) {
      this.$refs.upload.imageUrl = this.postData.picture;
    }
  }
};
</script>

<style scoped></style>
